<template>
	<div class="login-wrapper">
		<div class="login-container">
			<div class="login-box">
				<!-- 左侧装饰区域 -->
				<div class="login-decoration">
					<div class="decoration-content">
						<h1>欢迎使用</h1>
						<h2>就业管理系统</h2>
						<p>Professional Employment Management Platform</p>
					</div>
				</div>
				
				<!-- 右侧登录区域 -->
				<div class="login-content">
					<div class="login-header">
						<h2>账号登录</h2>
						<p>Welcome back, please login to your account</p>
					</div>
					
					<el-form :model="accountForm" :rules="accountRules" ref="accountForm"
						@keyup.enter.native="handleAccountLogin">
						<el-form-item prop="name">
							<el-input v-model="accountForm.name" placeholder="用户名">
								<i slot="prefix" class="el-icon-user"></i>
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="accountForm.password" type="password" placeholder="密码">
								<i slot="prefix" class="el-icon-lock"></i>
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="handleAccountLogin" class="submit-btn">
								登录
							</el-button>
						</el-form-item>
					</el-form>
					
					<div class="login-footer">
						<el-button type="text" @click="$router.push({ name: 'Register' })">
							还没有账号？立即注册
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapMutations } from 'vuex'
import { setToken, loginByNamePwd } from '@/http/auth.js'

export default {
	data() {
		return {
			accountForm: {
				name: '',
				password: ''
			},
			accountRules: {
				name: [{
					required: true,
					message: '请输入用户名',
					trigger: 'blur'
				}],
				password: [{
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				}]
			}
		}
	},
	created() {
		localStorage.removeItem("store")
	},
	methods: {
		...mapMutations('user', ['updateName', 'updateUser']),
		// 账号密码登录
		async handleAccountLogin() {
			await this.$refs.accountForm.validate()
			loginByNamePwd(this.accountForm).then(res => {
				if (res.data.code === 200) {
					setToken(res.data.data.token)
					this.updateUser(res.data.data.user)
					this.updateName(res.data.data.user.name)
					this.$message.success('登录成功')
					this.$router.push('/Home/Page')
				} else {
					this.$message.error(res.data.message || '登录失败')
				}
			})
		}
	}
}
</script>

<style scoped>
.login-wrapper {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.login-container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.login-box {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
	display: flex;
	overflow: hidden;
	backdrop-filter: blur(10px);
}

.login-decoration {
	flex: 1;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-align: center;
}

.decoration-content h1 {
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: 600;
}

.decoration-content h2 {
	font-size: 24px;
	margin-bottom: 20px;
	font-weight: 500;
}

.decoration-content p {
	font-size: 16px;
	opacity: 0.8;
}

.login-content {
	flex: 1;
	padding: 40px;
}

.login-header {
	text-align: center;
	margin-bottom: 30px;
}

.login-header h2 {
	font-size: 24px;
	color: #333;
	margin-bottom: 10px;
}

.login-header p {
	color: #666;
	font-size: 14px;
}

.el-tabs__nav-wrap::after {
	height: 1px;
	background-color: #eee;
}

.el-tabs__item {
	font-size: 16px;
	color: #666;
}

.el-tabs__item.is-active {
	color: #667eea;
}

.el-tabs__active-bar {
	background-color: #667eea;
}

.el-input__inner {
	height: 50px;
	line-height: 50px;
	border-radius: 25px;
	border: 1px solid #ddd;
	padding-left: 45px;
	font-size: 14px;
}

.el-input__inner:focus {
	border-color: #667eea;
	box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.el-input__prefix {
	left: 15px;
	color: #999;
}

.submit-btn {
	width: 100%;
	height: 50px;
	border-radius: 25px;
	font-size: 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	margin-top: 20px;
}

.submit-btn:hover {
	background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.code-btn {
	background: transparent;
	border: none;
	color: #667eea;
	font-size: 14px;
	padding: 0 15px;
}

.code-btn:hover:not(:disabled) {
	color: #764ba2;
}

.code-btn:disabled {
	color: #999;
}

.login-footer {
	text-align: center;
	margin-top: 20px;
}

.login-footer .el-button {
	color: #667eea;
	font-size: 14px;
}

.login-footer .el-button:hover {
	color: #764ba2;
}

@media (max-width: 768px) {
	.login-box {
		flex-direction: column;
	}
	
	.login-decoration {
		padding: 30px;
	}
	
	.login-content {
		padding: 30px;
	}
}
</style>
